import { Space, Table, Badge ,Image,Button,Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {useNavigate} from "react-router-dom"
import {useDispatch,useSelector} from "react-redux"
import React,{useEffect,useState} from 'react';
import * as api from "../../api/index"
interface DataType {
  key: string;
  name: string;
  img:string,
  state:string,
  record:any
}
type Props = {}

const stateFn=(key:string)=>{
  switch (key) {
    case "已完成":
     return "success"
     case "未完成":
     return "error"
     case "进行中":
      return "warning"
    default:
     break;
  }
}
const Home = (props: Props) => {
  const Navigate=useNavigate()
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
  const gotodeils=(val:any)=>{
    // console.log(val);
    
    Navigate("/index/deils/"+val.key,{state:val})
  }
  const columns: ColumnsType<DataType> = [
    {
      title: 'Key',
      dataIndex: 'key',
      key: 'key',
     
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'IMage',
      dataIndex: 'img',
      key: 'img',
      render: (_, record) => (
        <Space size="middle">
         <Image src={record.img}/>
        </Space>
      ),
    },
    {
      title: 'State',
      dataIndex: 'state',
      key: 'state',
      render: (_, record) => (
       <span>
        <Badge status={stateFn(record.state)}/>
        <span>{record.state}</span>
       
       </span>
      ),
    },
    {
      title: 'Address',
      dataIndex: 'city',
      key: 'city',
    },
   
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button onClick={()=>gotodeils(record)}>详情</Button>
         <Button>编辑</Button>
          <Button>删除</Button>
        </Space>
      ),
    },
  ];
  
  const dispatch:any=useDispatch()
useEffect(()=>{
dispatch(api.getlist1())
},[])
const tabeldata=useSelector((state:any)=>{
  return state.reducer.tabeldata
})

console.log(tabeldata);
const { Option } = Select;

const handleChange = (value: string) => {
dispatch(api.filterlist1(value))
};
  return (
    <div>
       <span>
                <Select defaultValue="已完成" style={{ width: 120 }} onChange={handleChange}>
                <Option value="已完成">已完成</Option>
                <Option value="未完成">未完成</Option>
               
                <Option value="进行中">进行中</Option>
              </Select>
                </span>
<Table 
 rowSelection={{
  type: "checkbox",
  ...rowSelection,
}}
columns={columns} dataSource={tabeldata} pagination={{pageSize:5}}/>
    </div>
  )
}

export default Home